<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>MagicTags Example</title>
		<!-- magictags CSS -->
		<link rel="stylesheet" href="css/magictags.css" />
		<!-- jquery -->
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<!-- source file -->
		<script type="text/javascript" src="js/jquery.magictags.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//start MagicTags, optionally passing the fade effect speed option
				magictags = $.MagicTags({fadeSpeed: "medium"});
				
				//fade effect speed can also be set anytime
				//magictags.fadeSpeed = "slow";
				//magictags.fadeSpeed = "medium";
				//magictags.fadeSpeed = "fast";
			});
		</script>
	</head>
	<body>
		<!-- these are the magictag controls. you group controls by giving the ul an id. (tech_tags here)
			this way you could have several different control groups on the page at once.
			Elements on the page that are tagged with a tag in this group must use a css 
			class that matches this ul's id. see below.
		-->
		<ul id="tech_tags" class="magictags">
			<li class="mtagcontrol-filter">filter by</li>
			<li><span><a href="#" id="flextag" class="mtagcontrol mtag-adobe-flex">Adobe Flex</a></span></li>
			<li><span><a href="#" id="javascript-test" class="mtagcontrol mtag-javascript">Javascript</a></span></li>
			<li><span><a href="#" id="django-test" class="mtagcontrol mtag-django">Django</a></span></li>
			<li><span><a href="#" id="setOneImportant" class="mtagcontrol mtag-important">Important</a></span></li>
			<li class="mtagcontrol-clear"><span><a href="#" class="mtagcontrol mtagcontrol-clear">X</a></span></li>
		</ul>
		
		<!-- notice each item that is 'tagged' has at least 3 classes:
			1- The class 'mtagged'
			2- The class that corresponds with the tag set. 'tech_tags' in this case
			3- The actual tag name, preceded by 'mtag-' so as not not conflict with other css classes
		-->
		<div id="taggedItemsSetOne">
			<div class="tech_tags mtagged mtag-javascript">This is tagged with: Javascript</div>
			<div class="tech_tags mtagged mtag-adobe-flex">This is tagged with: Adobe Flex</div>
			<div class="tech_tags mtagged mtag-django">This is tagged with: Django</div>
			<div class="tech_tags mtagged" id="not-tagged-item">This is NOT tagged</div>
			<div class="tech_tags mtagged mtag-django mtag-adobe-flex mtag-javascript">This is tagged with: Django, Adobe Flex, and Javascript</div>
			<div class="tech_tags mtagged mtag-django mtag-javascript">This is tagged with: Django and Javascript</div>
			<div class="tech_tags mtagged mtag-adobe-flex mtag-javascript">This is tagged with: Adobe Flex and Javascript</div>
			<div class="tech_tags mtagged mtag-adobe-flex mtag-django mtag-important">This is tagged with: Adobe Flex and Django and IMPORTANT</div>
		</div>
	</body>
</html>
